<script setup lang="ts">
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { AlertTriangle } from 'lucide-vue-next';

interface Props {
  open: boolean;
  title?: string;
  description?: string;
  confirmText?: string;
  cancelText?: string;
  loading?: boolean;
}

withDefaults(defineProps<Props>(), {
  title: '确认删除',
  description: '此操作不可恢复，确定要删除吗？',
  confirmText: '确定删除',
  cancelText: '取消',
  loading: false,
});

const emit = defineEmits<{
  'confirm': [];
  'cancel': [];
  'update:open': [value: boolean];
}>();

function handleConfirm() {
  emit('confirm');
}

function handleCancel() {
  emit('cancel');
  emit('update:open', false);
}

function handleOpenChange(open: boolean) {
  emit('update:open', open);
}
</script>

<template>
  <Dialog :open="open" @update:open="handleOpenChange">
    <DialogContent class="sm:max-w-md">
      <DialogHeader>
        <div class="flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10">
            <AlertTriangle class="h-5 w-5 text-destructive" />
          </div>
          <DialogTitle>{{ title }}</DialogTitle>
        </div>
        <DialogDescription>
          {{ description }}
        </DialogDescription>
      </DialogHeader>
      <DialogFooter class="gap-2">
        <Button
          variant="outline"
          :disabled="loading"
          @click="handleCancel"
        >
          {{ cancelText }}
        </Button>
        <Button
          variant="destructive"
          :loading="loading"
          @click="handleConfirm"
        >
          {{ confirmText }}
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>
